<style>

	.line  {width: 100%; display: flex; align-items: center; height: 32px; }
	.single { height: 20px; line-height: 20px; padding: auto; width: 30px; font-size: 12px; border: outset 2px lightgrey; text-align: center; cursor: pointer; margin-right: 5px;  }
	.single.active { border: inset 2px lightgrey; color: orange; }
	.line input[type=text] { height: 24px; width: 240px;  }
	span.tab { margin-left: 20px; }
	.chart { width: 100%; height: 400px; margin-bottom: 30px; }
</style>

<div id="vm">
	<h3></h3>
	
	<section id="conditions">
		<h4>统计条件：</h4>
		<div class="line">
			<label>时间范围：</label>
			从　<input type="date" v-model="beginDate">　至　<input type="date" v-model="endDate">　
			<span class="tab"></span>
			<label>快速选择：</label>
			<div :class="'single ' + (val.value==timeRangeGroup?'active':'')"  v-for="val in timeRangeGroups" @click="chooseTimeRangeGroups(val.value)">{{val.name}}</div>
			<input type="text" list="timeRanges" v-model="timeRange" @click="clearTimeRange" placeholder="选择统计时间区间">
			<datalist id="timeRanges">
				<option v-for="val in timeRanges[timeRangeGroup]" :value="val.desc + ' (' + val.begin + '~' + val.end + ')' "></option>
			</datalist>
		</div>
		<div class="line">
			<label>统计区域：</label>
			<div :class="'single ' + (val.value==targetRangeGroup?'active':'')" v-for="val in targetRangeGroups" @click="chooseTargetRangeGroups(val.value)">{{val.name}}</div>
			<input type="text" list="targetRanges" v-model="targetRange" @click="clearTargetRange" placeholder="选择统计区域范围">
			<datalist id="targetRanges">
				<option v-for="val in targetRanges[targetRangeGroup]" :value="val"></option>
			</datalist>
			<span class="tab"></span>
			<label>查询精度：</label>
			<div :class="'single ' + (val.value==targetItem?'active':'')" v-for="val in targetItems[targetRangeGroup]" @click="chooseTargetItems(val.value)">{{val.name}}</div>
		</div>
		<div class="line">
			<button @click="showChart">查询</button>
		</div>

	</section>
	<hr>
	<section id="charts">
		<h4>收入统计</h4>
		<div class="chart" id="payfeeChart"></div>
		<hr>
		<h4>会员人数统计</h4>
		<div class="chart" id="usersChart"></div>
	</section>

</div>

<script>

	var regionList = function(){
		let ranges = {nation: ["全国"], region: [], city: [], gym: []};
		$.get(dataDomain + "iv.php", {do: "targetRangeNames"}, function(r){
			console.log(r);
			let s = null;
			s = rd.distinct(r, "region", "region_id");
			for(let i in s){
				ranges.region.push(i);
			}
			s = rd.distinct(r, "city", "city_id");
			for(let i in s){
				ranges.city.push(i);
			}
			s = rd.distinct(r, "gym", "gym_id");
			for(let i in s){
				ranges.gym.push(i);
			}
		}, 'json')
		return ranges;
	}

	var vm = new Vue({
		el: "#vm",
		data: {
			timeRangeGroups: [{name: "年", value: "years"}, {name: "季", value: "seasons"}, {name: "月", value: "months"}, {name: "周", value: "weeks"}],
			timeRangeGroup: "years",
			timeRanges: {years: rd.yearsList(2015), seasons: rd.seasonsList(8), months: rd.monthsList(24), weeks: rd.weeksList(30)},
			timeRange: '',
			beginDate: "",
			endDate: "",
			timeItems: {
				years: [{name: "季", value: "seasons"}, {name: "月", value: "months"}, {name: "周", value: "weeks"}],
				seasons: [{name: "月", value: "months"}, {name: "周", value: "weeks"}],
				months: [{name: "周", value: "weeks"}, {name: '日', value: 'days'}],
				weeks: [{name: '日', value: 'days'}]
			},
			timeItem: 'months',
			targetRangeGroups: [{name: "国", value: "nation"}, {name: "区", value: "region"}, {name: "市", value: "city"}, {name: "店", value: "gym"}],
			targetRangeGroup: "nation",
			targetRanges: regionList(),
			targetRange: '全国',
			targetItems: {
				nation: [{name: "区", value: "region"},{name: "市", value: "city"}, {name: "店", value: "gym"}], 
				region: [{name: "市", value: "city"}, {name: "店", value: "gym"}],
				city: [{name: "店", value: "gym"}, {name: "人", value: "coach"}],
				gym: [{name: "人", value: "coach"}],
			},
			targetItem: 'region',
			showTypes: ['time', 'target'],
			showType: 'target'
		},
		computed: {

		},
		methods: {
			clearTimeRange: function(e){this.timeRange = "";},
			clearTargetRange: function(e){this.targetRange = "";},
			chooseTimeRangeGroups(g){
				this.timeRangeGroup = g;
				let val = this.timeRanges[g][0]
				this.timeRange = val.desc + ' (' + val.begin + '~' + val.end + ')';
			},
			chooseTargetRangeGroups(g){
				this.targetRangeGroup = g;
				this.targetRange = this.targetRanges[g][0];
			},
			chooseTargetItems(g){
				this.targetItem = g;
			},
			showChart(){
				let that = this;
				this.getPayFee(function(r){
					that.showPayfeeCharts();
				})
				this.getUsers(function(r){
					that.showUsersCharts();
				})
			},
			getPayFee: function(callback){
				axios.get(dataDomain + "iv.php", {params: {do: "pay_fee"}}).then(function(r){
					console.log(r.data);
					vm.payFee = r.data;
					callback(r);
				}).catch(function(e){
					console.log(e);
				})
			},
			getUsers: function(callback){
				axios.get(dataDomain + "iv.php", {params: {do: "users"}}).then(function(r){
					console.log(r.data);
					vm.users = r.data;
					callback(r);
				}).catch(function(e){
					console.log(e);
				})
			},
			showPayfeeCharts: function(){
				let payfeeChart = echarts.init(document.getElementById("payfeeChart"));
				let opt = rd.chart_option.createNew();
				opt.add_series([{name: '收入', type: 'bar'}, {name: '执行收入', type: 'bar'}, {name: '执行率', type: 'line'}]);
				opt.set_xAxis_datas(this.payFee, ["targetName"]);
				for(let i in this.payFee){
					let x = this.payFee[i];
					opt.option.series[0].data.push(Number(x.pay_fee).toFixed(2));
					opt.option.series[1].data.push(Number(x.r_fee).toFixed(2));
					opt.option.series[2].data.push((Number(x.r_fee) / Number(x.pay_fee) * 100).toFixed(2));
				}
				opt.set_all_labels(opt.textShadowCommen);
				opt.set_all_items(opt.shadowCommen);
				opt.set_labels(['万', '万', '%']);
				opt.option.series[2].yAxisIndex = 1;
				// opt.option.yAxis[1].max = 100;
				console.log(opt.option);
				payfeeChart.setOption(opt.option);
			},
			showUsersCharts: function(){
				let usersChart = echarts.init(document.getElementById("usersChart"));
				let opt = rd.chart_option.createNew();
				opt.add_series([{name: '总会员数', type: 'bar'}, {name: '体验课会员', type: 'bar'}, {name: '正式课会员', type: 'bar'}, {name: '正式课会员占比', type: 'line'}]);
				opt.set_xAxis_datas(this.users, ["targetName"]);
				for(let i in this.users){
					let x = this.users[i];
					opt.option.series[0].data.push(Number(x.users).toFixed(0));
					opt.option.series[1].data.push(Number(x.ty_user).toFixed(0));
					opt.option.series[2].data.push(Number(x.zk_user).toFixed(0));
					opt.option.series[3].data.push((Number(x.zk_user) / Number(x.users) * 100).toFixed(2));
				}
				opt.set_all_labels(opt.textShadowCommen);
				opt.set_all_items(opt.shadowCommen);
				opt.set_labels(['人', '人', '人','%']);
				opt.option.series[0].barGap = '-100%';
				opt.set_label(0, {position: 'top'});
				opt.option.series[3].yAxisIndex = 1;
				opt.option.yAxis[0].max = 10000;
				opt.option.color.unshift("#333333");
				// opt.option.yAxis[1].max = 100;
				opt.option.series[1].stack = opt.option.series[2].stack = "a";
				usersChart.setOption(opt.option);
			}
		},
		watch: {
			timeRange: function(a){ // 选择日期范围，起止日期随之更新
				// console.log(a);
				for(let i in this.timeRanges[this.timeRangeGroup]){
					let x = this.timeRanges[this.timeRangeGroup][i];
					if (x.desc == a.split(" ")[0]){
						this.beginDate = x.begin;
						this.endDate = x.end;
					}
				}
			}
		},
		mounted(){
			let val = this.timeRanges['years'][0];
			this.timeRange = val.desc + ' (' + val.begin + '~' + val.end + ')';
		}

	})

</script>